<template>
  <div class="announcement-detail">
    <div class="header">
      <el-page-header @back="goBack" content="公告详情" />
    </div>
    
    <div class="announcement-content" v-if="announcement">
      <div class="announcement-header">
        <h1 class="title">{{ announcement.title }}</h1>
        <div class="meta-info">
          <span class="publisher">发布者：{{ announcement.publisherName }}</span>
          <span class="time">发布时间：{{ formatTime(announcement.createTime) }}</span>
          <el-tag v-if="announcement.status === 1" type="success">已发布</el-tag>
          <el-tag v-else type="info">已失效</el-tag>
        </div>
      </div>
      
      <div class="announcement-image" v-if="announcement.imageUrl">
        <el-image 
          :src="announcement.imageUrl" 
          :preview-src-list="[announcement.imageUrl]"
          fit="cover"
          style="width: 100%; max-height: 400px; border-radius: 8px;"
        />
      </div>
      
      <div class="announcement-body">
        <div class="content" v-html="formatContent(announcement.content)"></div>
      </div>
      
      <div class="announcement-footer">
        <div class="actions">
          <el-button type="primary" @click="shareAnnouncement">
            <el-icon><Share /></el-icon>
            分享
          </el-button>
          <el-button @click="printAnnouncement">
            <el-icon><Printer /></el-icon>
            打印
          </el-button>
        </div>
      </div>
    </div>
    
    <div class="loading" v-else-if="loading">
      <el-skeleton :rows="10" animated />
    </div>
    
    <div class="error" v-else-if="error">
      <el-result
        icon="error"
        title="公告加载失败"
        :sub-title="error"
      >
        <template #extra>
          <el-button type="primary" @click="fetchAnnouncement">重新加载</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Share, Printer } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const announcement = ref(null)
const loading = ref(false)
const error = ref('')

const announcementId = route.params.id

// 模拟公告数据
const mockAnnouncements = [
  {
    id: 1,
    title: '国庆节放假安排通知',
    content: `
      <h3>尊敬的各位老人及家属：</h3>
      <p>国庆节期间（10月1日-10月7日）养老院正常运营，各项服务照常提供。具体安排如下：</p>
      <ul>
        <li><strong>餐饮服务：</strong>节日期间提供特色节日餐食，包含传统美食和营养配餐</li>
        <li><strong>活动安排：</strong>每天上午9:00-11:00在活动室举办节日主题活动</li>
        <li><strong>探访时间：</strong>家属探访时间延长至下午6:00</li>
        <li><strong>医疗服务：</strong>24小时医疗值班，确保老人健康安全</li>
      </ul>
      <p>祝大家节日快乐，身体健康！</p>
      <p><strong>温馨养老院管理部</strong></p>
      <p>2024年9月30日</p>
    `,
    publisherName: '管理员',
    createTime: '2024-09-30 10:00:00',
    imageUrl: '/announcements/national_day.jpg',
    status: 1
  },
  {
    id: 2,
    title: '秋季健康讲座通知',
    content: `
      <h3>秋季健康养生讲座</h3>
      <p>为关爱老人健康，提高养生意识，我院特邀知名中医专家举办秋季健康养生讲座。</p>
      
      <h4>讲座信息：</h4>
      <ul>
        <li><strong>主题：</strong>秋季养生与疾病预防</li>
        <li><strong>时间：</strong>本周六下午2:00-4:00</li>
        <li><strong>地点：</strong>活动中心多功能厅</li>
        <li><strong>主讲人：</strong>张教授（中医养生专家）</li>
      </ul>
      
      <h4>讲座内容：</h4>
      <ol>
        <li>秋季气候特点与人体健康</li>
        <li>常见秋季疾病预防</li>
        <li>秋季饮食调理</li>
        <li>适合老人的秋季运动</li>
        <li>心理健康调适</li>
      </ol>
      
      <p><strong>温馨提示：</strong></p>
      <ul>
        <li>请提前10分钟到场</li>
        <li>可携带纸笔记录要点</li>
        <li>讲座结束后有现场咨询环节</li>
      </ul>
      
      <p>欢迎各位老人及家属踊跃参加！</p>
    `,
    publisherName: '健康管理部',
    createTime: '2024-09-28 14:30:00',
    imageUrl: '/announcements/health_lecture.jpg',
    status: 1
  },
  {
    id: 3,
    title: '消防安全演练通知',
    content: `
      <h3>消防安全演练通知</h3>
      <p>为提高全体人员的消防安全意识和应急处理能力，我院将组织消防安全演练。</p>
      
      <h4>演练安排：</h4>
      <ul>
        <li><strong>时间：</strong>本周五上午9:00-10:30</li>
        <li><strong>地点：</strong>全院范围</li>
        <li><strong>参与人员：</strong>全体老人、工作人员</li>
      </ul>
      
      <h4>演练流程：</h4>
      <ol>
        <li>9:00-9:15 消防安全知识讲解</li>
        <li>9:15-9:30 疏散路线说明</li>
        <li>9:30-9:45 模拟火灾报警</li>
        <li>9:45-10:00 紧急疏散演练</li>
        <li>10:00-10:15 灭火器使用演示</li>
        <li>10:15-10:30 演练总结</li>
      </ol>
      
      <h4>注意事项：</h4>
      <ul>
        <li>请各位老人听从工作人员指挥</li>
        <li>行动不便的老人将由专人协助</li>
        <li>演练期间请保持冷静，不要惊慌</li>
        <li>如遇特殊情况，请及时联系工作人员</li>
      </ul>
      
      <p>安全第一，预防为主！请大家积极配合！</p>
    `,
    publisherName: '安全管理部',
    createTime: '2024-09-25 16:00:00',
    imageUrl: '/announcements/fire_drill.jpg',
    status: 1
  }
]

const fetchAnnouncement = async () => {
  loading.value = true
  error.value = ''
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    const foundAnnouncement = mockAnnouncements.find(a => a.id === parseInt(announcementId))
    if (foundAnnouncement) {
      announcement.value = foundAnnouncement
    } else {
      error.value = '公告不存在'
    }
  } catch (err) {
    error.value = '加载公告失败，请稍后重试'
    console.error('Error fetching announcement:', err)
  } finally {
    loading.value = false
  }
}

const formatTime = (timeStr) => {
  return new Date(timeStr).toLocaleString('zh-CN')
}

const formatContent = (content) => {
  // 简单的HTML内容格式化
  return content.replace(/\n/g, '<br>')
}

const goBack = () => {
  router.back()
}

const shareAnnouncement = () => {
  if (navigator.share) {
    navigator.share({
      title: announcement.value.title,
      text: announcement.value.content.replace(/<[^>]*>/g, '').substring(0, 100) + '...',
      url: window.location.href
    }).catch(err => {
      console.log('分享取消:', err)
    })
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(window.location.href).then(() => {
      ElMessage.success('链接已复制到剪贴板')
    }).catch(() => {
      ElMessage.info('请手动复制链接分享')
    })
  }
}

const printAnnouncement = () => {
  window.print()
}

onMounted(() => {
  fetchAnnouncement()
})
</script>

<style scoped>
.announcement-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  min-height: 100vh;
}

.header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.announcement-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.announcement-header {
  padding: 30px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.announcement-header .title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1.4;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  opacity: 0.9;
}

.announcement-image {
  padding: 20px 30px 0;
}

.announcement-body {
  padding: 30px;
}

.content {
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}

.content :deep(h3) {
  color: #409eff;
  margin: 20px 0 15px;
  font-size: 20px;
}

.content :deep(h4) {
  color: #67c23a;
  margin: 15px 0 10px;
  font-size: 18px;
}

.content :deep(ul), .content :deep(ol) {
  margin: 10px 0;
  padding-left: 20px;
}

.content :deep(li) {
  margin: 8px 0;
}

.content :deep(strong) {
  color: #e6a23c;
  font-weight: 600;
}

.announcement-footer {
  padding: 20px 30px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.loading, .error {
  padding: 40px 20px;
  text-align: center;
}

/* 打印样式 */
@media print {
  .header,
  .announcement-footer {
    display: none;
  }
  
  .announcement-content {
    box-shadow: none;
  }
  
  .announcement-header {
    background: none !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .announcement-detail {
    padding: 10px;
  }
  
  .announcement-header {
    padding: 20px;
  }
  
  .announcement-header .title {
    font-size: 22px;
  }
  
  .meta-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .announcement-body {
    padding: 20px;
  }
  
  .content {
    font-size: 14px;
  }
}
</style>
